## Setup Create icon files set. You should know how by now. Create manifest.json with these contents: ``` { "manifest_version": 3, "name": "", "version": "1.0", "description": ".", "author": "Weng Fei Fung", "icons": { "16": "icon16x16.png", "32": "icon32x32.png", "48": "icon48x48.png", "128": "icon128x128.png" }, "content_security_policy": { "extension_pages": "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; object-src 'self';" }, "permissions": [ "sidePanel", "scripting", "tabs", "activeTab" ], "action": { "default_icon": "icon.png" }, "background": { "service_worker": "background.js" }, "side_panel": { "default_path": "sidepanel.html" } } ``` Notice the "sidePanel" as a permission. Otherwise, side panel api would not be available for you to programmatically open the side panel. Based on the manifest.json, we see that this is a function action (NOT a popup action), so no popup.html is needed. We also see that there are two files we need to create: - background.js - sidepanel.html Create background.js to detect the user **right-clicking** the chrome extension icon (for the function action): ``` console.log("Background script loaded"); chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: 'openSidePanel', title: 'Open side panel', contexts: ['all'] }); }); chrome.contextMenus.onClicked.addListener((info, tab) => { if (info.menuItemId === 'openSidePanel') { // This will open the panel in all the pages on the current window. chrome.sidePanel.open({ windowId: tab.windowId }); } }); ``` ^Then background.js opens the sidepanel programmatically. ^Upon context menu item being clicked, you have access to the menu item id as well as the tab you're at when accessing the chrome extension icon's context menu. You match the menu item id is as expected before proceeding. Then with the tab, you can extract the window id to open the side panel with (you pass window id into the method that opens the side panel). Create sidepanel.html: ``` Options

Side Panel

``` Update/install the chrome extension because we will do some preliminary testing next. --- ## Testing Click the chrome extension icon. Thinking what happens under the hood: - background.js detects onclick event of the chrome extension icon - background.js then programmatically opens sidepanel (which is sidepanel.html) Should look like: - Right-clicked chrome extension icon -> Open side panel ![[Pasted image 20250326211015.png]] - After clicking "Open side panel": ![[Pasted image 20250326211036.png]] The context menu item is also available by right-clicking the webpage: ![[Pasted image 20250407005702.png]] --- ## Possible Concerns The context menu appears if you right-click the Chrome Extension. Chrome MAY DECIDE if a context menu appears if you left-click the Chrome Extension, and Chrome Extension does not offer you any API to set the context menu to open on left-click, nor does the official docs disclose the heuristics that Chrome uses to determine if your chrome extension should be context menu for both left-click and right-click. It may be possible for the left-clicking to not open any context menu especially since you'll be making your own chrome extensions with various differences to the tutorials. That is concerning. You can, however, have left-click open a popup.html that has a popup.css that mimics a context menu. Or you can have left-click open a popup.html that instructs the user to right click the chrome extension icon (perhaps the popup.html can also show an animated GIF or screenshots of right-clicking the chrome extension icon). Or you can have right click context menu item and left-click perform different actions. Let's work through a solution that performs different actions. Let's have the left-click action open a different sidepanel than the right-click context menu item opens. - On Chrome extension icon left-click, set the side panel path to sidepanel2.html. - Then when you open from a right-click context menu item, you have to make sure the sidepanel path resets back to sidepanel.html. The Side Panel API offers a setOptions method that lets us change the side panel path. - Change background.js to: ``` console.log("Background script loaded"); chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: 'openSidePanel', title: 'Open side panel', contexts: ['all'] }); }); chrome.contextMenus.onClicked.addListener((info, tab) => { if (info.menuItemId === 'openSidePanel') { // This will open the panel in all the pages on the current window. chrome.sidePanel.setOptions({ path: 'sidepanel.html' }); chrome.sidePanel.open({ windowId: tab.windowId }); } }); chrome.action.onClicked.addListener((tab) => { chrome.sidePanel.setOptions({ path: 'sidepanel2.html' }); chrome.sidePanel.open({ windowId: tab.windowId }); }); ``` - Let's make sure to create that sidepanel2.html: ``` Options

Side Panel 2!!!

``` Update the chrome extension. You'll see that left-click opens: ![[Pasted image 20250405020642.png]] And the right-click -> "Open side panel" loads in: ![[Pasted image 20250405020708.png]]